<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <!-- 
          active-text-color="#ffd04b"  ---- 激活/选中 的文字颜色
          background-color="#545c64"   ---- 激活/选中 的背景颜色
          class="el-menu-vertical-demo"   ---- 
          default-active="2"   ---- 默认选中的菜单 - 第几个
          text-color="#fff"   ---- 字体颜色
         -->
        <el-menu
          active-text-color="#489eff"
          background-color="#001529"
          class="el-menu-vertical-demo"
          :default-active="activeIndex"
          text-color="#fff"
        >
          <!-- 头 -->
          <el-menu-item index="logo">
            <img src="@/assets/image/logo.png" alt="" class="logo" />
            <span>XXX管理系统</span>
          </el-menu-item>

          <!-- @click="$router.push('/home')" 点击跳转 /home页 -->
          <el-menu-item index="/home" @click="$router.push('/home')">
            <el-icon><document /></el-icon>
            <span>工作台</span>
          </el-menu-item>

          <!-- 剩余的菜单 需要根据更改的menuArr 去生成 -->
          <!-- el-sub-menu -->

          <!-- 使用递归组件 -->
          <MyMenuItem :data="menuArr"></MyMenuItem>
          <!--  -->
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <!-- 下拉菜单 -->
            <el-dropdown>
              <!-- 设置按钮 -->
              <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
              <!-- 点击设置按钮，会弹出下面三个内容 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人资料</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
        <el-main>
          main
          <!-- 二级视图出口 -->
          <router-view></router-view>
        </el-main>
        <el-footer class="el-header">Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入manuArr
import menuArr from '@/router/menu'

// 引入递归组件
import MyMenuItem from '@/components/MyMenuItem.vue'
export default {
  // 注册
  components: {
    MyMenuItem
  },
  data() {
    return {
      menuArr,
      activeIndex: '/home'
    }
  },

  // mounted 挂载完毕
  mounted() {
    // this.$route.path -- 当前路由地址
    this.activeIndex = this.$route.path
  }
}
</script>

<style lang="css" scoped>
.el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-menu {
  height: 100vh;
}
.logo {
  width: 40px;
}
</style>
